<template>
  <div class="iframe">
    <ul class="aside">
      <li>
        <img @click="$router.push({name:'Home'})" :src="require('@/assets/images/btn_home.png')" alt="">
      </li>
      <li>
        <img @click="isShowShare = true" :src="require('@/assets/images/btn_share.png')" alt="">
      </li>
    </ul>
    <vShare v-if="isShowShare" @close="isShowShare = false" />

    <iframe :key="sceneCode" :src="`https://www.4dkankan.com/spg.html?m=${sceneCode}`" frameborder="0"></iframe>
  </div>
</template>

<script>
import vShare from "@/components/share";

export default {
  components:{vShare},
  data(){
    return {
      isShowShare: false,
      sceneCode:this.$route.params.id
    }
  }
}
</script>

<style lang="less" scoped>
.iframe{
  width: 100%;
  height: 100%;
  position: relative;
  .aside{
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    >li{
      cursor: pointer;
      margin: 10px 0;
      width: 60px;
      >img{
        width: 100%;
      }
    }
  }
  >iframe{
    width: 100%;
    height: 100%;
  }
}

@media screen and (max-width: 500px) {
  .iframe{
  .aside{
    top: 30px;
    left: 14px;
    transform: none;
    >li{
      margin: 10px 0;
      width: 46px;
    }
  }
}
}

</style>